<template>
    <div class="customer-page" style="margin-left: 15px; margin-top: 15px;">
        
        <!-- 水费数据表格 -->
        <h2>水费标准</h2>
        <el-button type="primary" icon="el-icon-plus" @click="openAddWaterDialog">新增水费标准</el-button>
        <el-table :data="waterTableData" tooltip-effect="dark" class="billing-table" width="100%">
            <el-table-column label="序号" width="150">
                <template #default="scope">
                    {{ scope.$index + 1 + (waterCurrentPage - 1) * waterPageSize }}
                </template>
            </el-table-column>
            <el-table-column prop="wtier" label="档位" width="150"></el-table-column>
            <el-table-column prop="wpriceRange" label="阶梯" width="200"></el-table-column>
            <el-table-column prop="wprice" label="价位" width="200"></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="openEditWaterDialog(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="deleteWaterPrice(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 电费数据表格 -->
        <h2 style="margin-top: 20px;">电费标准</h2>
        <el-button type="primary" icon="el-icon-plus" @click="openAddElectricityDialog">新增电费标准</el-button>
        <el-table :data="electricityTableData" tooltip-effect="dark" class="billing-table" width="100%">
            <el-table-column label="序号" width="150">
                <template #default="scope">
                    {{ scope.$index + 1 + (electricityCurrentPage - 1) * electricityPageSize }}
                </template>
            </el-table-column>
            <el-table-column prop="tier" label="档位" width="150"></el-table-column>
            <el-table-column prop="priceRange" label="阶梯" width="200"></el-table-column>
            <el-table-column prop="price" label="价位" width="200"></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="openEditElectricityDialog(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="deleteElectricityPrice(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 水费编辑弹窗 -->
        <el-dialog title="编辑水费标准" :visible.sync="editWaterDialogVisible" width="50%">
            <el-form :model="editWaterForm" label-width="100px">
                <el-form-item label="档位">
                    <el-input v-model="editWaterForm.wtier" placeholder="档位"></el-input>
                </el-form-item>
                <el-form-item label="阶梯">
                    <el-input v-model="editWaterForm.wpriceRange" placeholder="阶梯"></el-input>
                </el-form-item>
                <el-form-item label="价位">
                    <el-input v-model="editWaterForm.wprice" placeholder="价位"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitEditWater">确定</el-button>
                    <el-button type="default" @click="editWaterDialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 水费新增弹窗 -->
        <el-dialog title="新增水费标准" :visible.sync="addWaterDialogVisible" width="50%">
            <el-form :model="addWaterForm" label-width="100px">
                <el-form-item label="档位">
                    <el-input v-model="addWaterForm.wtier" placeholder="档位"></el-input>
                </el-form-item>
                <el-form-item label="阶梯">
                    <el-input v-model="addWaterForm.wpriceRange" placeholder="阶梯"></el-input>
                </el-form-item>
                <el-form-item label="价位">
                    <el-input v-model="addWaterForm.wprice" placeholder="价位"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitAddWater">确定</el-button>
                    <el-button type="default" @click="addWaterDialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 电费编辑弹窗 -->
        <el-dialog title="编辑电费标准" :visible.sync="editElectricityDialogVisible" width="50%">
            <el-form :model="editElectricityForm" label-width="100px">
                <el-form-item label="档位">
                    <el-input v-model="editElectricityForm.tier" placeholder="档位"></el-input>
                </el-form-item>
                <el-form-item label="阶梯">
                    <el-input v-model="editElectricityForm.priceRange" placeholder="阶梯"></el-input>
                </el-form-item>
                <el-form-item label="价位">
                    <el-input v-model="editElectricityForm.price" placeholder="价位"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitEditElectricity">确定</el-button>
                    <el-button type="default" @click="editElectricityDialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 电费新增弹窗 -->
        <el-dialog title="新增电费标准" :visible.sync="addElectricityDialogVisible" width="50%">
            <el-form :model="addElectricityForm" label-width="100px">
                <el-form-item label="档位">
                    <el-input v-model="addElectricityForm.tier" placeholder="档位"></el-input>
                </el-form-item>
                <el-form-item label="阶梯">
                    <el-input v-model="addElectricityForm.priceRange" placeholder="阶梯"></el-input>
                </el-form-item>
                <el-form-item label="价位">
                    <el-input v-model="addElectricityForm.price" placeholder="价位"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitAddElectricity">确定</el-button>
                    <el-button type="default" @click="addElectricityDialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { 
    getWaterPriceList, 
    deleteWaterPrice, 
    editWaterPrice, 
    addWaterPrice, 
    getElectricityPriceList, 
    deleteElectricityPrice, 
    editElectricityPrice, 
    addElectricityPrice 
} from '@/api/psm/billingStandard'

export default {
    name: 'BillingStandard',
    data() {
        return {
            // 水费数据
            waterTableData: [],
            waterCurrentPage: 1,
            waterPageSize: 10,
            addWaterDialogVisible: false,
            editWaterDialogVisible: false,
            editWaterForm: {},
            addWaterForm: {},

            // 电费数据
            electricityTableData: [],
            electricityCurrentPage: 1,
            electricityPageSize: 10,
            addElectricityDialogVisible: false,
            editElectricityDialogVisible: false,
            editElectricityForm: {},
            addElectricityForm: {},
        }
    },

    created() {
        this.fetchWaterData();
        this.fetchElectricityData();
    },

    methods: {
        // 获取水费数据
        fetchWaterData() {
            getWaterPriceList().then(response => {
                console.log("water response", response);
                this.waterTableData = response.data; // 确保 response.data 是水费数据
            }).catch(() => {
                this.$message({ type: 'error', message: '获取水费标准失败!' });
            });
        },

        // 获取电费数据
        fetchElectricityData() {
            getElectricityPriceList().then(response => {
                console.log("electricity response", response);
                this.electricityTableData = response.data; // 确保 response.data 是电费数据
            }).catch(() => {
                this.$message({ type: 'error', message: '获取电费标准失败!' });
            });
        },

        // 打开新增水费对话框
        openAddWaterDialog() {
            this.addWaterDialogVisible = true;
            this.addWaterForm = { wtier: '', wpriceRange: '', wprice: '' }; // 重置表单
        },

        // 提交新增水费
        submitAddWater() {
            // 档位和阶梯不能为空
            if(!this.addWaterForm.wtier || !this.addWaterForm.wpriceRange || !this.addWaterForm.wprice) {
                this.$message({ type: 'error', message: '档位、阶梯、价位不能为空!' });
                return;
            }
            addWaterPrice(this.addWaterForm).then(() => {
                this.$message({ type: 'success', message: '新增水费标准成功!' });
                this.addWaterDialogVisible = false;
                this.fetchWaterData();
            }).catch(() => {
                this.$message({ type: 'error', message: '新增水费标准失败!' });
            });
        },

        // 打开编辑水费对话框
        openEditWaterDialog(row) {
            this.editWaterForm = { ...row };
            this.editWaterDialogVisible = true;
        },

        // 提交编辑水费
        submitEditWater() {
            editWaterPrice(this.editWaterForm).then(() => {
                this.$message({ type: 'success', message: '编辑水费标准成功!' });
                this.editWaterDialogVisible = false;
                this.fetchWaterData();
            }).catch(() => {
                this.$message({ type: 'error', message: '编辑水费标准失败!' });
            });
        },

        // 删除水费标准
        deleteWaterPrice(id) {
            this.$confirm('确定删除该水费标准吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteWaterPrice(id).then(() => {
                    this.$message({ type: 'success', message: '删除水费标准成功!' });
                    this.fetchWaterData();
                }).catch(() => {
                    this.$message({ type: 'error', message: '删除水费标准失败!' });
                });
            });
        },

        // 打开新增电费对话框
        openAddElectricityDialog() {
            this.addElectricityDialogVisible = true;
            this.addElectricityForm = { tier: '', priceRange: '', price: '' }; // 重置表单
        },

        // 提交新增电费
        submitAddElectricity() {
            // 档位和阶梯不能为空
            if(!this.addElectricityForm.tier || !this.addElectricityForm.priceRange || !this.addElectricityForm.price) {
                this.$message({ type: 'error', message: '档位、阶梯、价位不能为空!' });
                return;
            }
            addElectricityPrice(this.addElectricityForm).then(() => {
                this.$message({ type: 'success', message: '新增电费标准成功!' });
                this.addElectricityDialogVisible = false;
                this.fetchElectricityData();
            }).catch(() => {
                this.$message({ type: 'error', message: '新增电费标准失败!' });
            });
        },

        // 打开编辑电费对话框
        openEditElectricityDialog(row) {
            this.editElectricityForm = { ...row };
            this.editElectricityDialogVisible = true;
        },

        // 提交编辑电费
        submitEditElectricity() {
            editElectricityPrice(this.editElectricityForm).then(() => {
                this.$message({ type: 'success', message: '编辑电费标准成功!' });
                this.editElectricityDialogVisible = false;
                this.fetchElectricityData();
            }).catch(() => {
                this.$message({ type: 'error', message: '编辑电费标准失败!' });
            });
        },

        // 删除电费标准
        deleteElectricityPrice(id) {
            this.$confirm('确定删除该电费标准吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteElectricityPrice(id).then(() => {
                    this.$message({ type: 'success', message: '删除电费标准成功!' });
                    this.fetchElectricityData();
                }).catch(() => {
                    this.$message({ type: 'error', message: '删除电费标准失败!' });
                });
            });
        }
    }
}
</script>

<style scoped>
.customer-page {
    margin: 15px 30px;
}
.billing-table {
    width: 100%;
}
</style>
